import vue from '@vitejs/plugin-vue'
import postcssNested from 'postcss-nested'
import { mergeConfig } from 'vite'

/**
 * @type { import('@storybook/vue3-vite').StorybookConfig }
 */
const config = {
  stories: [
    '../src/stories/**/*.mdx',
    '../src/stories/**/*.stories.@(js|jsx|mjs|ts|tsx)'
  ],
  addons: [
    '@storybook/addon-links',
    '@storybook/addon-essentials',
    '@storybook/addon-interactions',
    '@storybook/addon-viewport'
  ],
  framework: {
    name: '@storybook/vue3-vite',
    options: {}
  },
  docs: {
    autodocs: 'tag'
  },
  viteFinal: async config => {
    return mergeConfig(config, {
      css: {
        postcss: {
          plugins: [postcssNested({ preserveEmpty: true })]
        }
      },
      plugins: [vue()]
    })
  }
}

export default config
